<template>
    <div>
        <div class="table-title">商品创建/修改</div>
        <el-tabs v-model="activeName">
            <el-form ref="goodEditBaseInfoRef" :model="goodEditBaseInfo" :rules="goodEditBaseInfoRules"
                :label-width="120">
                <el-tab-pane label="基本信息" name="first">
                    <el-form-item label="商品名称" prop="good_name">
                        <el-input v-model="goodEditBaseInfo.good_name" placeholder="请输入商品名称" />
                    </el-form-item>
                    <el-form-item label="商品分类" prop="good_type">
                        <el-tree-select v-model="goodEditBaseInfo.good_type" :data="goodsEditTypeList" check-strictly
                            placement="bottom" show-checkbox :props="goodsTypeListTreeProps"
                            :default-expanded-keys="defaultExpandedKeys" placeholder="请选择商品分类" />
                    </el-form-item>
                    <el-form-item label="商品上级分类" prop="good_parent_type">
                        <el-tree-select v-model="goodEditBaseInfo.good_parent_type" :data="goodsEditParentTypeList"
                            check-strictly placement="bottom" show-checkbox :props="goodsParentTypeListTreeProps"
                            placeholder="请选择商品上级分类" />
                    </el-form-item>
                    <el-form-item label="商品图片" prop="good_img">
                        <el-upload :file-list="goodEditBaseInfo.good_img" list-type="picture-card" :auto-upload="false"
                            ref="imgRef" :on-change="handleChange" :on-remove="imgRemove"
                            :on-preview="handlePictureCardPreview" :on-success="uploadSuccess" name="file"
                            :http-request="imgUploadFunc">
                            <!-- :on-progress="uploadProgress" -->
                            <!-- action="http://api_devs.wanxikeji.cn/api/savePic"> -->
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                        <el-dialog v-model="imgPreview">
                            <img :src="imgPreviewUrl" alt="Preview Image" class="dialog-preview-img" />
                        </el-dialog>
                    </el-form-item>
                    <el-form-item label="商品编码" prop="good_id">
                        <el-input-number v-model="goodEditBaseInfo.good_id" placeholder="请输入商品id" :min="0" :step="1"
                            :precision="0" :controls="false" />
                    </el-form-item>
                    <el-form-item label="运费模板" prop="good_carriage">
                        <el-select v-model="goodEditBaseInfo.good_carriage" placeholder="请选择商品运费模板">
                            <el-option v-for="item in goodEditBaseInfoCarriage" :label="item.label" :key="item.label"
                                :value="item.value + ''" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品状态">
                        <el-radio-group v-model="goodEditBaseInfo.good_status">
                            <el-radio :label=1>上架</el-radio>
                            <el-radio :label=2 size="large">下架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商品排序">
                        <el-input-number v-model="goodEditBaseInfo.good_sort" :min="0" :max="9999" :step="1"
                            :precision="0" controls-position="right" />
                    </el-form-item>
                    <el-form-item label="热卖">
                        <el-radio-group v-model="goodEditBaseInfo.good_is_new">
                            <el-radio :label=0>是</el-radio>
                            <el-radio :label=1 size="large">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-tab-pane>

                <el-tab-pane label="规格/库存" name="second">

                    <el-form-item label="规格类型" prop="good_size_type">
                        <el-radio-group v-model="goodEditBaseInfo.good_size_type">
                            <el-radio :label=1>单规格</el-radio>
                            <el-radio :label=2>多规格</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <div v-if="goodEditBaseInfo.good_size_type == 1">
                        <el-form-item label="商品价格" prop="good_price">
                            <el-input-number v-model="goodEditBaseInfo.good_price" placeholder="请输入商品价格" :min="0"
                                :step="0.01" :precision="2" :controls="false" />
                        </el-form-item>
                        <el-form-item label="划线价" prop="good_promotion_price">
                            <el-input-number v-model="goodEditBaseInfo.good_promotion_price" placeholder="请输入划线价"
                                :min="0" :step="0.01" :precision="2" :controls="false" />
                        </el-form-item>
                        <el-form-item label="当前库存数量" prop="good_stock">
                            <el-input-number v-model="goodEditBaseInfo.good_stock" placeholder="请输入库存数量" :min="0"
                                :max="999999" :step="1" :precision="0" :controls="false" />
                        </el-form-item>
                        <el-form-item label="商品重量" prop="good_stock">
                            <el-input-number v-model="goodEditBaseInfo.good_weight" placeholder="请输入商品重量" :min="0"
                                :max="999999" :step=".01" :precision="2" :controls="false" />
                        </el-form-item>
                    </div>

                    <div v-else>
                        <el-form-item label="商品规格" prop="good_edition">
                            <div class="good-size" v-for="(item, index) of goodEditBaseInfo.good_edition.skuColumn">
                                <div class="good-size-input"><el-input placeholder="请输入规格组名称"
                                        v-model="item.columnKey" />
                                    <span @click="delGoodSizeGroup(item, index)">删除规格组</span>
                                </div>
                                <div class="good-size-input-innner">
                                    <template
                                        v-for="(itemInner, indexInner) of goodEditBaseInfo.good_edition.skuColumn[index].columnValue">
                                        <el-input placeholder="请输入规格值" clearable @clear="delGoodSize(index, indexInner)"
                                            v-model="goodEditBaseInfo.good_edition.skuColumn[index].columnValue[indexInner]" />
                                    </template>
                                    <span class="good-size-add-new-item" @click="addGoodSize(item, index)">新增规格值</span>
                                </div>
                            </div>
                            <el-button plain @click="addGoodSizeGroup"> <span>+ 新增规格组</span> </el-button>
                        </el-form-item>
                        <el-form-item label="SKU列表" prop="good_spu">
                            <table class="sku-table">
                                <tr v-if="goodEditBaseInfo.good_edition.skuColumn.length > 0">
                                    <th v-for="i in goodEditBaseInfo.good_edition.skuColumn">{{ i.columnKey }}</th>
                                    <th>预览图</th>
                                    <th>商品价格</th>
                                    <!-- <th>划线价格</th> -->
                                    <th>库存数量</th>
                                    <!-- <th>商品重量(KG)</th> -->
                                    <!-- <th>SKU编码</th> -->
                                </tr>
                                <!-- 这里列数行数都不一定 加上套娃 可以封装成组件 用传值+递归组件 -->
                                <tr v-if="goodEditBaseInfo.good_edition.skuColumn.length > 0"
                                    v-for="(item, index) in goodEditBaseInfo.good_edition.skuList">
                                    <td v-for="(itemInner, indexInner) in goodEditBaseInfo.good_edition.skuColumn">
                                        {{ item.sku[indexInner] }}
                                    </td>
                                    <td>{{ item.img }}</td>
                                    <td>{{ item.price }}</td>
                                    <td>{{ item.stock }}</td>
                                </tr>
                                <!-- <tr v-if="goodEditBaseInfo.good_edition.skuColumn.length > 0"
                                    v-for="(item, index) in goodEditBaseInfo.good_edition.skuList.length">
                                    <td v-for="(itemInner, indexInner) in goodEditBaseInfo.good_edition.skuColumn">
                                        类似笛卡尔积反向运算
                                        {{ itemInner.columnValue[index] }}
                                    </td>
                                </tr> -->
                            </table>
                        </el-form-item>
                    </div>



                    <el-form-item label="库存计算方式" prop="good_stock_calculation">
                        <el-radio-group v-model="goodEditBaseInfo.good_stock_calculation">
                            <el-radio :label=1>下单减库存</el-radio>
                            <el-radio :label=2>付款减库存</el-radio>
                        </el-radio-group>
                    </el-form-item>




                </el-tab-pane>
                <el-tab-pane label="商品详情" name="third">商品详情</el-tab-pane>
                <el-tab-pane label="更多设置" name="fourth">更多设置</el-tab-pane>
            </el-form>

            <el-button type="primary" @click="submitGoodsInfo" class="good-edit-submit-btn">提 交</el-button>
            <el-button @click="editCancel" class="good-edit-cancel-btn"> 取 消 </el-button>

        </el-tabs>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, watch, onMounted, reactive, watchEffect } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Copy, deepCopy, arrayCombine, Format } from '/util/CommonFunctions.js'

const token = window.localStorage.getItem('token')
const { proxy } = getCurrentInstance()

const props = defineProps(['goodInfoDetail', 'goodsTypeList'])
const emits = defineEmits(['showBoolean'])

const goodsTypeListTreeProps = { children: 'children', label: 'type_name' } // 树形选择匹配值
const goodsParentTypeListTreeProps = { children: 'children', label: 'type_name' } // 树形选择匹配值
let defaultExpandedKeys = ref([]) //默认展开的数组
let defaultExpandedParentKeys = ref([]) //默认展开数组
let goodsEditTypeList = ref([])
let goodsEditParentTypeList = ref([])

// let activeName = ref('first') //tabs 绑定值
let activeName = ref('second') //tabs 绑定值

let goodEditBaseInfoRef = ref()  // 获取表单子组件
let goodEditBaseInfo = ref({ // 表单数据
    good_name: undefined,
    good_type: undefined,
    good_parent_type: undefined,
    good_price: undefined,
    good_img: [],
    good_id: undefined,
    good_carriage: '0', // 运费
    good_status: 1, // 状态
    good_sort: 100,
    // good_size_type: 1,  // 规格类型
    good_size_type: 2,  // 规格类型
    good_is_new: 0,  // 热卖

    good_stock_calculation: 1,// 库存计算方式
    good_stock: undefined, // 单规格 库存数量
    good_weight: undefined, // 单规格 商品重量

    good_edition: { // 多规格 edition sku
        skuColumn: [
            // { columnKey: '甲', columnValue: ['1a', '1b'] }, { columnKey: '乙', columnValue: ['2a', '2b'] }, { columnKey: '丙', columnValue: ['3a', '3b', '3c'] },
        ],
        skuList: []
    },

    // good_colour: {}, // spu colour

})

let goodEditBaseInfoDefault = deepCopy(goodEditBaseInfo.value) //表单初始化数据 //嵌套对象的深度拷贝

const goodEditBaseInfoRules = reactive({ // 校验规则
    good_name: [{ required: true, message: '请输入商品名称' }],
    good_type: [{ required: true, message: '请选择商品分类' }],
    good_parent_type: [{ required: true, message: '请选择商品上级分类' }],
    good_price: [{ required: true, message: '请输入商品价格' }],
    good_promotion_price: [{ type: 'number' }],
    good_img: [{ required: true, message: '请选择商品图片' }],
    good_id: [{ type: 'number' }],
    good_carriage: [{}], // 运费
    good_status: [{}],// 状态
    good_sort: [{ type: 'number' }],
    good_size_type: [{ required: true, message: '请选择商品规格类型' }],
    good_is_new: [{}], // 是否热卖
    good_stock_calculation: [{ type: 'number' }], // 库存计算方法

    good_stock: [{ type: 'number' }],   // 单规格 库存
    good_weight: [{ type: 'number' }], // 单规格 重量

    good_edition: [{ type: 'any' }], // 多规格 edition sku
    // good_spu: [{}],

})

const goodEditBaseInfoCarriage = [{ label: '包邮', value: 0 }, { label: '不包邮', value: 1 }]// 运费选择项

let imgPreview = ref(false) //图片预览
let imgPreviewUrl = ref() //图片预览链接
let imgRef = ref() // 图片上传组件

const getGoodInfoDetail = watch(() => props.goodInfoDetail, //商品信息 分类列表默认展开项  //此组件用的v-show 不能销毁此watch  
    (newOne, oldOne) => {
        if (newOne != undefined) {
            console.log(newOne);
            // console.log(JSON.parse(newOne.info[0].info)); // 富文本
            // console.log(JSON.parse(newOne.info[0].colour));

            goodEditBaseInfo.value.good_name = newOne.good_name
            goodEditBaseInfo.value.good_price = parseFloat(newOne.price)
            goodEditBaseInfo.value.good_promotion_price = parseFloat(newOne.promotion_price)

            let tempImgsData = JSON.parse(newOne.info[0].imgs)
            if (tempImgsData[0] != '[') { tempImgsData = [tempImgsData] } // 如果前后不包括[] 则由(字符串类型+字符串格式)转为数组 // 仅针对单个链接 假如为'url,url' 后面会报错
            else { tempImgsData = JSON.parse(tempImgsData) } // 前后包括[] 则由(字符串类型+数组格式)转为数组 // 同上
            tempImgsData.map(i => { goodEditBaseInfo.value.good_img.push({ url: i }) })
            // eval(JSON.parse(newOne.info[0].imgs)) // 为数组时 //eval()不推荐使用 安全性考虑

            goodEditBaseInfo.value.good_type = newOne.type_id
            goodEditBaseInfo.value.good_parent_type = newOne.type_parent_id == 0 ? undefined : newOne.type_parent_id
            goodEditBaseInfo.value.good_id = newOne.good_id
            goodEditBaseInfo.value.good_status = newOne.status
            goodEditBaseInfo.value.good_is_new = newOne.is_new

            goodEditBaseInfo.value.good_edition.skuColumn = JSON.parse(newOne.info[0].edition).sku_column.map(item => {
                return Format.objChangeKeys(item, ['columnKey', 'columnValue']) // key value 替换为 columnKey columnValue
            })
            goodEditBaseInfo.value.good_edition.skuList = JSON.parse(newOne.info[0].edition).sku_list


            defaultExpandedKeys.value.push(goodEditBaseInfo.value.good_type)
            defaultExpandedParentKeys.value.push(goodEditBaseInfo.value.good_parent_type)

        }
    },
    { deep: true, immediate: true }
)

const getGoodsTypeList = watch(() => props.goodsTypeList, // 分类列表 // 可在传值时处理 这里不用监听 节约性能 //可销毁 进入到此组件和父组件时分类列表已固定 在父组件的兄弟组件更新
    (newOne, oldOne) => {
        goodsEditTypeList.value = JSON.parse(JSON.stringify(newOne)).slice(1)
        goodsEditParentTypeList.value = JSON.parse(JSON.stringify(newOne)).slice(1)
        // if (newOne[0] !== undefined) { // 获取到 goodsEditTypeList 后销毁此watch 节约性能
        //     getGoodsTypeList() //开发时 停留在此页面并更新代码会报错 此时getGoodsTypeList已被销毁 无法调用
        // }  
    },
    { deep: true, immediate: true }
)

const refreshSkuColumn = watch(goodEditBaseInfo.value.good_edition.skuColumn, // 侦听 skuColumn //ref // newOne, oldOne相同 异步???
    (newOne, oldOne) => {
        console.log(newOne);
        newOne.map(item => { if (item.columnValue.length === 0) { item.columnValue = [''] } }) // 这里决定了某一规格组不能为空 // 可添加提示或调用删除规格组的函数
        loadSkuList(newOne)
    },
    { deep: true, immediate: true } // 第一次加载时要通过接口赋值 这里不用立即监听 // 暂时用立即监听 赋值时再看有没有问题
)

function imgUploadFunc(e) { // 图片上传
    let fileData = new FormData()
    fileData.append('img', e.file)
    let imgObj
    let imgUploadReq = proxy.$reqFuncAxios('post', 'api/savePic', fileData)
    // e.onProgress() // 上传进度条 未完成 //获取接口返回的上传进度 或 获取本地上传进度
    return imgUploadReq
        .then(res => {
            if (res.data.code === 2000) {
                imgObj = { name: e.file.name, url: 'http://api_devs.wanxikeji.cn/' + res.data.data, uid: e.file.uid, status: "success" }
                goodEditBaseInfo.value.good_img.push(imgObj)
            }
            return res
        })
        .catch(res => { return res })// 上传失败
}

function imgUploadFuncCallback() { // 多次提交图片上传
    imgRef.value.submit()
}

function submitGoodsInfo() { // 提交商品信息  1.表单验证 2.图片上传 3.商品信息上传 4.表单重置 5.返回商品列表
    // console.log(imgRef.value);
    // imgRef.value.submit()
    imgUploadFuncCallback() //imgRef.value.submit() 没有可上传的项后执行下一步 // 不封装在函数内直接submit貌似会报错
    console.log(goodEditBaseInfo.value);
    // for (let i of goodEditBaseInfo.value.good_img) {
    //     console.log(i);
    // }

    // ElMessageBox.confirm('确定提交商品信息吗', 'Warning', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
    //     .then(() => {
    //         console.log(imgsList.value);
    //         imgRef.value.submit()
    //         showGoodsEditBoolean.value = !showGoodsEditBoolean.value;
    //         ElMessage({ type: 'success', message: 'completed', })
    //     })
    //     .catch(() => { ElMessage({ type: 'info', message: 'canceled', }) })
}

function editCancel() { // 取消编辑商品 重置表单
    ElMessageBox.confirm('确定取消商品编辑吗', '友情提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
        .then(() => {
            goodEditBaseInfo.value = JSON.parse(JSON.stringify(goodEditBaseInfoDefault)) //重置数据
            goodEditBaseInfoRef.value.resetFields() //重置表单
            ElMessage({ type: 'success', message: 'completed' })
            emits('showBoolean', true) // 传值给父组件 关闭edit组件
        })
        .catch(() => { ElMessage({ type: 'info', message: 'canceled', }) })
}

function imgRemove(file, uploadFiles) { //移除图片 同步删除goodEditBaseInfo的对应照片 uid // 删除的文件 显示的文件
    for (let i = 0; i < goodEditBaseInfo.value.good_img.length; i++) {
        if (goodEditBaseInfo.value.good_img[i].uid === file.uid) { goodEditBaseInfo.value.good_img.splice(i, 1) }
    }
    imgUploadFuncCallback() // 执行完单个文件上传后调用imgUploadFuncCallback() //该函数调用submit()
}

function handleChange(file, uploadFiles) { //上传图片改变 包括状态 // 可自动删除上传不成功的图片
    // if (file.status == 'fail') {
    //     console.log(file);
    // }
}

function uploadSuccess(response, uploadFile, uploadFiles) { // 上传到服务器成功 服务器回传成功与否还得另外判断 imgUploadFunc的返回值 当前图片 图片列表
    if (response.status == 200) { ElMessage.success('图片 ' + uploadFile.name + ' 上传成功'); }  // 上传成功
    else { ElMessage.warning('图片 ' + uploadFile.name + ' 上传失败'); uploadFile.status = 'fail' }// 上传失败 // 设置图片状态为fail
}

function uploadProgress(event, file, file_list) { // 正在上传
    // console.log(event);
    // console.log(file);
    // console.log(file_list);
}

function handlePictureCardPreview(e) { // 图片预览
    imgPreviewUrl.value = e.url
    imgPreview.value = true
}

function addGoodSize(item, index) { // 添加商品规格
    // console.log(item, index);
    // item.columnValue.push('')  //浅拷贝???
    goodEditBaseInfo.value.good_edition.skuColumn[index].columnValue.push('') // watch的是goodEditBaseInfo.value.good_edition.skuColumn 修改其内部属性不生效 deep也不行

    // console.log(goodEditBaseInfo.value.good_edition.skuColumn);
    // loadSkuList(goodEditBaseInfo.value.good_edition.skuColumn)
}

function delGoodSize(index, indexInner) { // 删除商品规格
    goodEditBaseInfo.value.good_edition.skuColumn[index].columnValue.splice(indexInner, 1)
}

function addGoodSizeGroup() { // 添加商品规格组 // 最多三组
    if (goodEditBaseInfo.value.good_edition.skuColumn.length < 3) {
        let newColumnKey = '规格组名称'
        let newColumnValue = '规格1'
        let tempSkuList = deepCopy(goodEditBaseInfo.value.good_edition.skuList)
        tempSkuList.forEach(element => { element.sku.push(newColumnValue) })
        goodEditBaseInfo.value.good_edition.skuList = tempSkuList
        goodEditBaseInfo.value.good_edition.skuColumn.push({ columnKey: newColumnKey, columnValue: [newColumnValue] })
    }
    else { ElMessage.warning('最多添加3个规格组') }
}

function delGoodSizeGroup(item, index) { // 删除商品规格组 // 这里形参有问题
    ElMessageBox.confirm('确定要删除该规格组吗', 'Warning', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', })
        .then(() => {
            let tempSkuList = deepCopy(goodEditBaseInfo.value.good_edition.skuList)
            tempSkuList.forEach(e => { e.sku.splice(index, 1) })
            goodEditBaseInfo.value.good_edition.skuList = Format.arrLighter(tempSkuList) // 可能存在的问题：每行输入后值有些值可能无法去重 // 去重函数修改或修改商品规格后重置SKU列表输入
            goodEditBaseInfo.value.good_edition.skuColumn.splice(index, 1)
            ElMessage({ type: 'success', message: 'completed', })
        })
        .catch(() => { ElMessage({ type: 'info', message: 'canceled', }) })
}

function loadSkuList(newOne) {  // 加载SKU列表 // 参数为 goodEditBaseInfo.value.good_edition.skuColumn
    let tempSkuList = deepCopy(goodEditBaseInfo.value.good_edition.skuList)
    goodEditBaseInfo.value.good_edition.skuList = []
    let tempData = []
    for (let i of newOne) { tempData.push(JSON.parse(JSON.stringify(i.columnValue))) } //深度拷贝 防止出错 //准备数据 格式为[[],[],[]]
    let skuArr = arrayCombine(...tempData) // 组合 // 新的sku数组
    let newSkuList = []
    skuArr.map(skuItem => {
        let indexRes = tempSkuList.findIndex((item) => { return item.sku.toString() == skuItem }) //  ??? 忘了为啥要toString()了 
        if (indexRes != -1) { newSkuList.push(tempSkuList[indexRes]) }
        else { newSkuList.push({ sku: skuItem, price: undefined, stock: undefined, img: undefined }) }
        // tempSkuList.map(item => { // 这个写法会添加 skuArr.length * tempSkuList.length 条数据 后面还要去重 而且是响应式变量 添加重复数据再去重 性能消耗较大  
        //     if (item.sku.toString() == skuItem) {     newSkuList.push(item)  }
        //     else {   newSkuList.push({ sku: skuItem, price: undefined, stock: undefined, img: undefined })        }
        // }) 
    })
    // newSkuList = Format.arrLighter(newSkuList) // 去重 去除完全相同的项  
    goodEditBaseInfo.value.good_edition.skuList = newSkuList
}

</script>
<style scoped>
.table-title {
    font-size: 16px;
    color: rgba(0, 0, 0, .75);
    margin-bottom: 16px;
}

.dialog-preview-img {
    min-width: 300px;
    min-height: 300px;
    max-width: 500px;
    max-height: 500px;
    display: block;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
}

.good-edit-submit-btn {
    margin-top: 30px;
    margin-left: 100px;
}

.good-edit-cancel-btn {
    margin-top: 30px;
}

.good-size-input-add {
    width: 300px;
}

.good-size-input-box {
    width: 700px;
    margin-left: -20px;
    margin-top: 10px;
}

.good-size-input-badge {
    z-index: 2;
}

.good-size-input-badge :deep() .el-badge__content {
    width: 14px;
    height: 10px;
    padding: 0;
    background-color: #7D7D7D;
    font-size: 12px;
    text-align: center;
    display: none;
    cursor: pointer;
    line-height: 12px;
    padding-bottom: 4px;
}

.good-size-input-badge:hover :deep() .el-badge__content {
    display: flex;
}

.good-size-input-box :deep() .el-input {
    width: 200px;
    margin: 0 0 15px 20px;
}

.good-size-input-box :deep() .el-input .el-input__wrapper:hover {
    box-shadow: 0 0 0 1px #409EFF;
}

.good-size {
    width: 100%;
    margin-bottom: 15px;

}

.good-size-input {
    width: 100%;
    background-color: #F4F5F9;
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
}

.good-size-input :deep().el-input {
    width: 300px;
}

.good-size-input-innner {
    padding: 20px 15px 10px 40px;
    background-color: #FBFBFB;
}

.good-size-input-innner :deep() .el-input {
    width: 200px;
    margin-right: 15px;
    margin-bottom: 10px;
}

.good-size span {
    color: #409EFF;
    font-size: 12px;
    display: inline-block;
    cursor: pointer;
    width: fit-content;
    margin-right: 30px;
}

.good-size span:hover {
    color: #93ceff;
}

.sku-table tr {
    height: 54px;
}

/* .sku-table td {
    height: 100%;
} */

/* table td[class^=td-] {
    background-color: yellowgreen;
} */
</style>